@import 'mixin.scss';
@import 'color.scss';
$bodyColor: #FBFBFB;
$bodyImage: "../../assets/images/login_bg.png";
$baseImage: "../../assets/images/login_icons.png";
.login-box {
    padding: 0 rem(40px);
    width: 100%;
    height: 100vh;
    background: url($bodyImage) no-repeat left bottom;
    background-color: $bodyColor;
    background-size: rem(750px) rem(180px);
    .icons {
        display: inline-block;
        background: url($baseImage) no-repeat;
        background-size: rem(46px) rem(273px);
    }
    .login-header {
        padding: rem(32px) 0;
        width: 100%;
        font-size: rem(36px);
        color: $link-a-color;
        line-height: rem(36px);
        .close {
            position: relative;
            left: 0;
            top: rem(5px);
            width: rem(28px);
            height: rem(28px);
            text-indent: -9999px;
            @include translate(0, 0);
            @include img-position(0, 0);
        }
    }
    .logo {
        width: 100%;
        height: rem(250px);
        margin-top: rem(40px);
        img {
            width: rem(237px);
            height: rem(90px);
        }
    }
    .form-group {
        position: relative;
        margin-bottom: rem(28px);
        width: 100%;
        .form-control {
            width: 100%;
            padding: rem(20px) 0 rem(20px) rem(95px);
            height: rem(92px);
            border: none;
            font-size: rem(32px);
            line-height: rem(53px);
            background-color: #ececec;
        }
    }
    .icons {
        position: absolute;
        top: 50%;
        left: rem(30px);
        @include translate(0, -50%);
    }
    .user {
        width: rem(29px);
        height: rem(29px);
        @include img-position(0, rem(-40px));
    }
    .pwd {
        width: rem(24px);
        height: rem(36px);
        @include img-position(rem(-3px), rem(-73px));
    }
    .eye {
        left: auto;
        right: rem(30px);
        width: rem(46px);
        height: rem(26px);
    }
    .eye-close {
        @include img-position(0, rem(-141px));
    }
    .eye-active {
        @include img-position(0, rem(-111px));
    }
    .mobile {
        width: rem(25px);
        height: rem(36px);
        @include img-position(rem(-3px), rem(-197px));
    }
    .code {
        width: rem(29px);
        height: rem(38px);
        @include img-position(0, rem(-234px));
    }
    #sendCode {
        position: absolute;
        right: rem(40px);
        top: 0;
        height: 100%;
        border: none;
        font-size: rem(32px);
        background: none;
    }
    .login-btn {
        margin-top: rem(90px);
        .btn {
            display: block;
            height: rem(102px);
            color: #848689;
            text-align: center;
            font-size: rem(36px);
            line-height: rem(102px);
            background-color: $border-color;
        }
        .btn-active {
            color: $color-white;
            background-color: $subject-color
        }
    }
    .quick-nav {
        margin-top: rem(20px);
        height: rem(70px);
        line-height: rem(70px);
        color: $color-666;
        font-size: rem(30px);
    }
}